<template>
  <div id="addressManagement">
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="10">
          <el-form :inline="true" :model="dataParam" class="demo-form-inline" label-position="left">
            <el-form-item label="收货人">
              <el-input v-model="dataParam.account" placeholder="收货人"></el-input>
            </el-form-item>
            <el-form-item label="地址">
              <el-input v-model="dataParam.address" placeholder="地址"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-form :inline="true" class="demo-form-inline" label-position="left">
            <el-form-item>
              <el-button type="primary" @click="queryAddress">查询</el-button>
              <el-button type="primary" @click="doReset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table
          :data="addressData"
          style="width: 100%">
        <el-table-column
            label="序号"
            width="180">
          <template slot-scope="scope">
            {{ scope.$index+1 }}
          </template>

        </el-table-column>
        <el-table-column
            prop="account"
            label="用户"
            width="180">
        </el-table-column>
        <el-table-column
            prop="phone"
            label="手机号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="region"
            label="区域"
            width="180">
        </el-table-column>
        <el-table-column
            prop="address"
            label="详细地址"
            width="180">
        </el-table-column>
        <el-table-column
            label="操作"
            width="120px">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="修改 " placement="top-start">
              <el-button type="primary"  icon="el-icon-edit" circle @click="doUpdate(scope.row)" ></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <el-footer>
      <el-row>
        <el-col :span="7">
          <el-pagination
              background
              :page-sizes="[3, 5, 10]"
              :page-size="pageSize"
              layout="sizes,prev, pager, next"
              :total="total"
              :page-count="pageCount"
              :current-page="pageNo"
              @prev-click="prevPage"
              @next-click="nextPage"
              @current-change="pageChange"
              @size-change="pageSizeChange"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>


    <el-dialog title="修改地址" :visible.sync="changeAddress">
      <el-form >
        <el-form-item label="用户名:" >
          <h2>{{myAddress.account}}</h2>
        </el-form-item>
        <el-form-item label="区域:" >
          <el-input v-model="myAddress.region" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址:">
          <el-input v-model="myAddress.address" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" >
        <el-button @click="changeAddress = false">取 消</el-button>
        <el-button type="primary" @click="updateAddress">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data(){
    return {
      pageSize:3,
      total:0,
      pageNo:1,
      pageCount:1,

      addressData:[],
      dataParam:{
        account:'',
        address:''
      },
      changeAddress:false,
      myAddress:{account:'',region:'',address:'',id:''},

    }
  },
  methods: {
    doReset() {
      this.dataParam.account='';
      this.dataParam.address='';
      this.pageNo=1;
      this.pageSize=3;
      this.queryAddress();

    },
    nextPage(val) { //下一页
      this.pageNo = val;
      this.queryAddress();
    },
    prevPage(val) { //上一页
      this.pageNo = val;
      this.queryAddress();
    },
    pageChange(val) {
      this.pageNo = val;
      this.queryAddress();
    },
    pageSizeChange(val) {
      this.pageNo = 1;
      this.pageSize = val;
      this.queryAddress();
    },
    updateAddress() {
      let jwt = localStorage.getItem("jwt");
      // console.log(jwt);
      this.$axios.post('api/address/updateAddress',this.myAddress,{headers:{"jwt":jwt}})
          .then(response =>{
            if(response.data.code==200){
              this.$message('修改成功');
            } else {
              this.$message('修改失败');
            }
            this.queryAddress();
            this.changeAddress=false;
          })
    },

    doUpdate(row) {
      this.changeAddress =true;
      this.myAddress.region = row.region;
      this.myAddress.address = row.address;
      this.myAddress.account = row.account;
      this.myAddress.id = row.id;

    },
    queryAddress() {
      let jwt = localStorage.getItem("jwt");
      let pageParam = {}
      pageParam.pageNo = this.pageNo;
      pageParam.pageSize = this.pageSize;
      pageParam.data = this.dataParam;


      this.$axios.post('api/address/queryAddress', pageParam,
          {headers: {"jwt": jwt}})
          .then(res => {
            console.log(res.data);
            if (res.data.code == 200) {
              let resdate = res.data.data;
              this.addressData = resdate.list;

              this.pageNo = resdate.pageNum;
              this.pageSize = resdate.pageSize;
              this.total = resdate.total;
              this.pageCount = resdate.pages;
            }
          })
    },
  },
  created(){
    this.queryAddress();
  }

}

</script>

<style scoped>
</style>
